<template>
  <view class="report-page">
    <!-- 页面顶部提示文字 -->
    <view class="page-header">
      <text class="header-text">
        为了维护社区环境，请详细描述您要举报的内容
      </text>
    </view>
    <!-- 举报原因选择框 -->
    <view class="reason-selector">
      <text class="label">举报原因</text>
      <picker :value="selectedReasonIndex" :range="reportReasons" @change="onReasonChange" range-key="label">
        <view class="reason-label">
          {{ reportReasons[selectedReasonIndex]?.label || '请选择举报原因'}}
          <text class="arrow-icon">
            >
          </text>
        </view>
      </picker>
    </view>
    <view class="detail">
      <text class="resport-more">详细举报原因：</text>
         <!-- 举报详细原因填写框 -->
    <view class="detail-input">
      <textarea v-model="reportDetail" placeholder="请输入详细举报原因（必填）" :maxlength="500" auto-height />
    </view>
    </view>
    <text class="errText">{{errText}}</text>



    <!-- 提交按钮 -->
    <button class="submit-button"  @tap="submitReport">
      提交举报
    </button>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
import {
    ref
  } from 'vue'


let goodsId=''
onLoad((Option)=>{
  //初始值
  console.log("初始值");
  console.log(Option);
  goodsId=Option.goodsId

})


  const selectedReasonIndex = ref(-1)
  const reportDetail = ref('')
  const errText = ref('')

  const reportReasons = [{
      value: '0',
      label: '虚假商品'
    },
    {
      value: '1',
      label: '侵权商品'
    },
    {
      value: '3',
      label: '其他问题'
    }
  ]



  function onReasonChange(event) {
    selectedReasonIndex.value = event.detail.value
    console.log(selectedReasonIndex);
    console.log(event);
  }


  function submitReport() {
    if (selectedReasonIndex.value === -1) {
      errText.value = '请选择举报原因'
      return
    }
    if (reportDetail.value === '') {
      errText.value = '请输入详细举报原因'
      return
    }
    errText.value = ''
    // 提交举报逻辑
    http.request({
      url:'/report/addReport',
      method:'post',
      data:{
        goodsId:goodsId,
        type:selectedReasonIndex.value,
        reason:reportDetail.value
      }
    }).then((res)=>{
      if(res.code==1){
        uni.showToast({
          icon:'success',
          title:res.msg
        })
        uni.navigateBack()
      }
      return
    }).catch((err)=>{
      console.log(err);
      uni.showToast({
        icon:'error',
        title:'举报失败，请检查后重试！'
      })
    })
  }
</script>

<style scoped>
  .report-page {
    /* 添加全局样式，如背景、间距等 */
    padding: 0 15px 15px 15px;
  }

  .page-header {
    /* 样式化头部提示文字 */
    font-size: 12px;
    color: #c1c1c1;
    margin: 10px 5px 10px 5px;
  }

  .reason-selector {
    /* 样式化举报原因选择框及其标签 */
      display: flex;
     justify-content: space-between; /* 或者使用 "justify-content: flex-end;" */
    border-bottom: 1px #c1c1c1 solid;
  }

  .label {
    display: block;
    padding:  5px 15px 5px 10px;
  }


.reason-label {
  /* 移除或注释掉原来的 margin-left: 100px; */
  margin-left: 0; /* 可以添加此行以确保左间距为0 */
  text-align: end;
  color: #bbbbbb;
  margin: 5px 15px 5px 0; /* 保留其他间距设置 */
}
  .arrow-icon {
    /* 样式化箭头图标 */
  }

  .detail {
    margin-top: 10px;
  }

  .resport-more {
    margin: 10px 10px 15px 10px;
  }

  .detail-input {
    /* 样式化举报详细原因输入框 */
    border: 1px #c1c1c1 solid;
    height: 100px;
    margin: 10px 10px 10px 10px;
  }
  .errText {
    color: red;
    margin-left: 10px;
    font-size: 14px;
    margin-top: 5px;

  }


  .submit-button {
    /* 样式化提交按钮 */
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    margin: 60px 10px 0 10px;

  }
</style>
